// 导入2D模型对象 和 2D模型渲染器
import { CSS2DRenderer, CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer.js'
// import { CSS3DRenderer, CSS3DSprite } from 'three/examples/jsm/renderers/CSS3DRenderer.js'
// 导入场景渲染器的宽高
import { contentCamera } from './RendererCamera'

/**
 * 创建一个顶部标签
 */
const tag = (name) => {
  // 创建div元素(作为标签)
  const div = document.createElement('div')
  // 给标签插入内容(依据传来的参数)
  div.innerHTML = name
  // 给元素设置一个class 方便设置样式
  div.classList.add('tag')
  // div元素包装为CSS2模型对象CSS2DObject
  const label = new CSS2DObject(div)

  div.style.pointerEvents = 'none'// 避免HTML标签遮挡三维场景的鼠标事件
  // label.scale.set(0.2, 0.2, 0.2)// 根据相机渲染范围控制HTML 3D标签尺寸
  // label.rotateY(Math.PI / 2)// 控制HTML标签CSS3对象姿态角度
  return label// 返回CSS2模型标签
}
/**
 * 创建一个点击详细信息卡片
 */
const tagCard = (domID) => {
  const dom = document.getElementById(domID)
  // dom元素包装为CSS2模型对象CSS2DObject
  const label = new CSS2DObject(dom)
  dom.style.pointerEvents = 'none'// 避免HTML标签遮挡三维场景的鼠标事件
  // 设置HTML元素标签在three.js世界坐标中位置
  // label.position.set(50, 50, -150)

  return label// 返回CSS2模型标签
}
/**
 * 创建一个CSS2渲染器
 */
const created2DRenderer = () => {
  // 创建一个CSS2渲染器CSS2DRenderer
  const labelRenderer = new CSS2DRenderer()
  // 设置渲染器的尺寸(需要和其他渲染器宽高一致)
  labelRenderer.setSize(contentCamera.width, contentCamera.height)
  labelRenderer.domElement.style.position = 'absolute'
  // 相对标签原位置位置偏移大小
  labelRenderer.domElement.style.top = '0px'
  labelRenderer.domElement.style.left = '0px'
  // 设置.pointerEvents=none，以免模型标签HTML元素遮挡鼠标选择场景模型
  labelRenderer.domElement.style.pointerEvents = 'none'
  // 进行渲染
  document.body.appendChild(labelRenderer.domElement)
  return { labelRenderer }
}

export { tag, tagCard, created2DRenderer }
